<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link href="https://fonts.font.im/css?family=Merienda" rel="stylesheet" />
        <style>
            * {
                font-family: 'Merienda', cursive;
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                height: 100vh;
                background-color: rgb(0, 0, 0);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            main {
                position: relative;
                overflow: hidden;
            }
            .txt {
                color: rgb(255, 255, 255);
                text-transform: uppercase;/* 字母转换为大写 */
                font-size: 168px;
                background-color: rgb(0, 0, 0);
                user-select: none;
            }
            .txt::before {
                content: 'live on.';
                position: absolute;
                /*   text-shadow: 0 0 10px  rgb(255, 255, 255),
                0 0 10px  rgb(255, 255, 255),
                0 0 10px  rgb(255, 255, 255); */
                filter: blur(3px);
                mix-blend-mode: difference;/* 差值模式。查看每个通道中的颜色信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。与白色混合将使底色反相；与黑色混合则不产生变化。 */
            }
            /* 让它定位后覆盖在字体上 */
            .txt2 {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, rgb(255, 0, 212), rgb(0, 119, 255), rgb(255, 187, 0), rgb(1, 255, 77));
                mix-blend-mode: multiply;/* 颜色减淡 */
            }
            .txt3 {
                position: absolute;
                top: -100%;
                left: -100%;
                right: 0;
                bottom: 0;
                background-image: radial-gradient(circle, white, black 30%);/* 设置白黑色渐变的圆圈 */
                background-size: 25% 25%;/*  圆的大小 */

                mix-blend-mode: color-dodge;
                animation: shine 3s linear infinite;
            }
            @keyframes shine {
                100% {
                    transform: translate(50%, 50%);
                }
            }
        </style>
    </head>
    <body>
        <main>
            <h1 class="txt">live on.</h1>
            <h1 class="txt2"></h1>
            <h1 class="txt3"></h1>
        </main>
    </body>
</html>
